<template>
    <div>

        <NavBar :title="title"></NavBar>
        <Swipe :images="images" :imgwidth="imgwidth" :imgheight="imgheight"></Swipe>
        <van-empty description="描述文字" v-show="kstarts" />

        <div v-for="item in cartData">
            <van-swipe-cell v-show="!kstarts">
                <van-card :price="item.goods.goods_price" :title="item.goods.goods_name">
                    <template #thumb>
                        <div style="display: flex; width: 110px; height: 110px;">
                            <van-checkbox v-model="item.checked"></van-checkbox>
                            <img :src="item.goods.goods_small_logo ? item.goods.goods_small_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'"
                                alt="" style="width: 70px; height: 70px;margin-top: 10px;">
                        </div>
                    </template>
                    <template #num>
                        <van-stepper v-model="item.number" theme="round" button-size="22" disable-input />

                    </template>
                </van-card>
                <template #right>
                    <van-button square text="删除" type="danger" style="height: 100%;margin-left: 2px;"
                        class="delete-button" @click="delcat(item.id)" />
                </template>
            </van-swipe-cell>


            <van-submit-bar :price="allprice" button-text="提交订单" @submit="onSubmit">
                <van-checkbox v-model="checkeddall">全选</van-checkbox>

            </van-submit-bar>

        </div>

    </div>
</template>

<script setup>
import NavBar from '@/components/NavBar.vue';
const title = '购物车'
import Swipe from '@/components/Swipe.vue';
const images = [
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-5.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-8.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg',
];
const imgwidth = '100%'
const imgheight = '200px'
import { computed, ref } from 'vue';
import { useRouter } from 'vue-router';
const router=useRouter()
import { useCounterStore } from '@/stores/counter'
// 在组件内部的任何地方均可以访问变量 `store` ✨
const store = useCounterStore()
console.log(store.counter);
let cartData = ref([])
let kstarts = ref(false)
const cart = () => {
    cartData.value = store.counter
    if (store.counter.length == 0) {
        kstarts.value = true
    } else {
        kstarts.value = false
    }
}
cart()


const delcat = (id) => {
    console.log(id);
    store.counter = store.counter.filter(item => item.id != id)
    cart()
}


const allprice = computed(() => {
    const allprice = ref(0)
    const cartok = cartData.value.filter(item => item.checked==true)
    cartok.forEach(item => {
        allprice.value += item.number * item.goods.goods_price
    })
    return allprice.value * 100
})

let checkeddall = computed({
    get() {
        if (cartData.value.length == 0) {
            return false
        } else {
            return cartData.value.every(item => item.checked)
        }
    },
    set(val) {
        console.log(val);
        cartData.value.forEach(item => {
            item.checked = val
        })
    }
})

import { showSuccessToast, showFailToast } from 'vant';
import { createOrderApi } from '@/api/api';
const onSubmit = () => {
    let cartok = cartData.value.filter(item => item.checked==true);
    if (cartok.length == 0) {
        showFailToast('选择商品');
    } else {
        createOrderApi({
            goodsIds: cartok.map(item => item.goods.goods_id).join(','),
            username: localStorage.getItem('username'),
            product_code: cartok[0].goods.goods_name + '等商品',
            totalPrice: allprice.value,
            nums: cartok.map(item => item.number).join(','),
        }).then(res => {
          console.log('订单生成成功', res)
           showSuccessToast('订单ok ');
          router.push('/order/'+res.data.data.orderId)
        })
    }
}

</script>

<style lang="scss" scoped></style>